<template>
  <div class="page-container">
    <div class="content-container">
      <div class="search-wrapper">
        <el-form :inline="true" :model="queryParams" ref="queryRef">
          <el-form-item prop="systemType">
            <el-select
              clearable
              v-model="queryParams.systemType"
              placeholder="请选择广告媒体"
              style="width: 180px"
            >
              <el-option
                v-for="item in bus_system_type"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item prop="status" style="width: 120px">
            <el-select placeholder="开户状态" v-model="queryParams.status">
              <el-option label="正常" value="0" />
              <el-option label="停用" value="1" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-date-picker
              v-model="dateRange"
              type="datetimerange"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="text" @click="handleSearch"> 查询 </el-button>
            <el-button type="info" link @click="resetSearch"> 重置 </el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- <div class="toolbar-container">
        <el-button type="primary"> 导入批量减款 </el-button>
        <el-button type="primary"> 导入批量增款 </el-button>
      </div> -->
      <div class="table-wrapper">
        <el-table :data="tableData" :loading="loading" border stripe>
          <el-table-column type="index" width="50" align="center" />
          <el-table-column prop="id" label="账户ID" align="center" />
          <!-- <el-table-column prop="username" label="账户名称" align="center" /> -->
          <el-table-column
            prop="systemTypeDesc"
            label="广告媒体"
            align="center"
          />
          <el-table-column
            prop="approvalStatusDesc"
            label="账户状态"
            width="100"
            align="center"
          />
          <el-table-column
            prop="consumeValue"
            label="消耗"
            width="80"
            align="center"
          >
            <template #default="scope">
              <span
                >{{ scope.row.consumeValue
                }}{{ selectDictLabel(bus_currency_type, getCoinType()) }}</span
              >
            </template>
          </el-table-column>
          <el-table-column
            prop="mediaBalance"
            label="余额"
            width="80"
            align="center"
          >
            <template #default="scope">
              <span
                >{{ scope.row.mediaBalance
                }}{{ selectDictLabel(bus_currency_type, getCoinType()) }}</span
              >
            </template>
          </el-table-column>
          <el-table-column
            prop="displayQuantity"
            label="展示量"
            width="80"
            align="center"
          />
          <el-table-column
            prop="transformQuantity"
            label="转化量"
            width="80"
            align="center"
          />
          <el-table-column
            prop="clickQuantity"
            label="点击量"
            width="80"
            align="center"
          />
          <el-table-column
            prop="approvalTime"
            label="开户时间"
            width="160"
            align="center"
          />
          <el-table-column
            fixed="right"
            label="操作"
            width="150"
            align="center"
          >
            <template #default="scope">
              <el-button type="primary" link @click="showRecharge(scope.row)">
                充值
              </el-button>
              <el-button
                link
                type="danger"
                @click="showUserReduction(scope.row)"
              >
                账户减款
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pager-wrapper">
        <pagination
          v-show="total > 0"
          :total="total"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </div>

    <rechargeDialog
      v-model:model-value="rechargeVisible"
      @onSuccess="handleSearch"
      :accountInfo="accountInfo"
      v-if="rechargeVisible"
    ></rechargeDialog>
    <userReductionDialog
      v-model:value="userReductionVisible"
      v-if="userReductionVisible"
      @onSuccess="handleSearch"
      :accountInfo="accountInfo"
    ></userReductionDialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, toRefs } from "vue";
import rechargeDialog from "./components/recharge-dialog.vue";
import userReductionDialog from "./components/user-reduction-dialog.vue";
import { selectDictLabel } from "@/utils/ruoyi.js";
import { getCoinType } from "@/utils/auth";
import { getAccountList } from "@/api/apply/index.js";

const dateRange = ref([]);

const { proxy } = getCurrentInstance();

const { bus_system_type, bus_approval_status, bus_currency_type } =
  proxy.useDict("bus_system_type", "bus_approval_status", "bus_currency_type");

const queryRef = ref();

const tableData = ref([{}]);
const rechargeVisible = ref(false);
const loading = ref(false);
const userReductionVisible = ref(false);
const total = ref(0);
const accountInfo = ref({});
const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    systemType: undefined,
  },
});

const { queryParams } = toRefs(data);

function handleSearch() {
  queryParams.pageNum = 1;
  getList();
}
function resetSearch() {
  dateRange.value = [];
  proxy.resetForm("queryRef");
  handleSearch();
}

function showRecharge(row) {
  accountInfo.value = row;
  rechargeVisible.value = true;
}
function handleClose() {
  rechargeVisible.value = false;
}

function showUserReduction(row) {
  userReductionVisible.value = true;
  accountInfo.value = row;
}
function getList() {
  getAccountList(proxy.addDateRange(data.queryParams, dateRange.value)).then(
    (res) => {
      loading.value = false;
      tableData.value = res.rows;
      total.value = res.total;
    }
  );
}
onMounted(() => {
  getList();
});
</script>

<style lang="scss">
.page-container {
  padding: 10px;

  .content-container {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    padding-bottom: 20px;

    .search-wrapper {
      margin: 20px;

      :deep(.el-card__body) {
        padding-bottom: 2px;
      }
    }

    .toolbar-container {
      margin-left: 20px;
    }

    .table-wrapper {
      margin: 20px 0;
    }

    .pager-wrapper {
      display: flex;
      justify-content: flex-end;
    }
  }
}
</style>
